Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/features/experience-detail/model/use-leave-confirm.tsx`:
- Around line 49-53: The confirmLeave callback currently only calls
blocker.proceed(); update it to also explicitly close the leave modal by calling
modalStore.close(LEAVE_MODAL_ID) (same as cancelLeave) so the modal is dismissed
immediately and the behavior is consistent; locate the confirmLeave function in
use-leave-confirm.tsx and add modalStore.close(LEAVE_MODAL_ID) before or after
blocker.proceed() to ensure the modal is closed on confirmation.
- Line 28: Move the LEAVE_MODAL_ID constant out of the hook to module scope:
declare const LEAVE_MODAL_ID = "leave-confirm-modal" above the useLeaveConfirm
hook definition in use-leave-confirm.tsx (and export it if other modules need
it), then remove the in-hook declaration so all references inside the hook
(e.g., any usages within useLeaveConfirm) point to the module-level constant to
improve readability and reusability.

In `@src/features/experience-detail/ui/experience-viewer/experience-viewer.tsx`:
- Around line 42-55: The delete modal currently calls modalStore.reset() in
handleOpenDeleteModal which closes all global modals; change it to open the
ModalBasic with a fixed unique id (e.g. const id = 'experience-delete') passed
to modalStore.open and then replace modalStore.reset() in both onClose and
onConfirm with modalStore.close(id) so only this modal is closed (keep onConfirm
calling onClickDelete() before modalStore.close(id)). Ensure you pass the id
when opening and use the same id in onClose/onConfirm.

In `@src/features/experience-matching/ui/select-company/select-company.tsx`:
- Line 66: The modal title hardcodes the Korean object particle ("을/를") and
should adapt to whether selectedCompany.name ends with a batchim; update the
text in Modal.Title where selectedCompany.name is used to either (a) call a
small utility (e.g., a josa helper like getJosa(name, '을', '를') or
hasBatchim-based function) and render "{selectedCompany.name}{josa} 선택하셨습니다", or
(b) switch to a neutral phrasing such as "선택한 기업: {selectedCompany.name}" to
avoid particle logic; modify the component to import/implement that josa helper
and use it around selectedCompany.name in the Modal.Title or replace the string
with the neutral form.
- Around line 60-77: The function handleSearch is misnamed because it doesn't
perform a search but confirms the selected company and shows a loading modal;
rename the function (e.g., to handleSelectConfirm or handleCompanySelect) and
update all references/usages to that new name (such as any onClick or prop
handlers that currently call handleSearch) so callers invoke the new identifier;
modify the function declaration for handleSearch to the chosen name and adjust
any exports/props passed into child components to match the new name, preserving
the existing logic that checks selectedCompany, opens modalStore, calls
setCompany(selectedCompany), and invokes onClick().

In `@src/shared/model/store/modal.store.ts`:
- Around line 57-59: The reset() method currently just clears _modalList and
calls _listner, which skips per-modal cleanup (timers and onClose); change
reset() to iterate over the existing _modalList (use a shallow copy) and call
the existing close(...) code-path for each modal (e.g., invoking the store's
close(id) or the modal's onClose/clearTimeout logic) so all timers and onClose
handlers run, then set _modalList = [] and invoke _listner once; ensure you
reference the existing close(...) function and _modalList/_listner symbols so
you reuse the proper cleanup logic rather than simply emptying the array.
- Around line 23-30: The modal ID generation in open() using new
Date().toString() can collide when open() is called rapidly; update open() to
generate collision-resistant IDs (e.g., use crypto.randomUUID() or a UUID v4
library, or a monotonic counter) instead of new Date().toString(); ensure the
generated id is assigned to new_modal.id and that existing close()/filter()
logic that relies on id (and this._modalList) continues to work with the new ID
format (update imports if you choose a UUID library).
- Around line 3-8: Change the ModalItem object shape from a type alias to an
interface: replace the `type ModalItem = { ... }` declaration with `interface
ModalItem { id: string; content: ReactNode; onClose?: () => void; autoPlay?:
number; }` so it follows the project's guideline of using interface for object
shapes; update any imports/exports or references to ModalItem in modal.store.ts
or other files if necessary to ensure the symbol name remains the same and
compiles.

---

Outside diff comments:
In `@src/features/experience-matching/ui/select-company/select-company.tsx`:
- Line 19: The SelectCompany component currently uses an inline prop type;
extract that into a named interface SelectCompanyProps and update the component
signature to use it (e.g., function SelectCompany(props: SelectCompanyProps) or
const SelectCompany = ({ onClick }: SelectCompanyProps) => ...), defining
SelectCompanyProps with onClick: () => void to follow the "ComponentNameProps"
naming guideline and improve readability/reuse (refer to SelectCompany and
onClick in the diff).

In `@src/shared/ui/modal/modal-basic.tsx`:
- Around line 27-41: The X button currently invokes the provider's close handler
instead of the modal instance's onClose prop, causing inconsistent cleanup;
update ModalBasic (the JSX block using Modal.XButton, Modal.Buttons, and the
props from ModalBasicProps.onClose) so that Modal.XButton receives and calls the
same onClose handler passed into the component (e.g., forward the onClose prop
down to Modal.XButton or attach a click handler that calls
ModalBasicProps.onClose) ensuring both the X button and the cancel Button call
the identical onClose logic.

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/features/experience-matching/ui/select-company/select-company.tsx`:
- Around line 60-79: handleSearch can be re-entered on rapid clicks causing
setCompany(selectedCompany) and onClick() to run multiple times; add a pending
guard (e.g., a useRef or state boolean like isPending) checked at the top of
handleSearch to return early if true, set isPending = true immediately before
calling modalStore.open, and clear/reset isPending in the modalStore.open
completion callback (the function that currently calls setCompany and onClick)
or after the 3s timeout so the flow only executes once per selection;
alternatively disable the related button when isPending is true. Ensure you
reference and update the same pending flag around handleSearch, modalStore.open,
setCompany and onClick to prevent double execution.

In `@src/shared/model/store/modal.store.ts`:
- Around line 12-20: The current implementation stores a single callback in
_listner and clears it globally in unsubscribe(), which overwrites earlier
subscribers and allows one component's cleanup to remove others; change _listner
to a collection (e.g., Set or array) of callbacks, update subscribe(callback:
(list: ModalItem[]) => void) to add the callback to that collection and return a
dedicated cleanup function that removes only that callback, and update
unsubscribe() (or remove it) so it no longer nulls all listeners; update any
emit/notify logic to iterate the collection when broadcasting modal list
changes.

---

Duplicate comments:
In `@src/shared/model/store/modal.store.ts`:
- Around line 57-63: reset() currently clears timers and the _modalList without
invoking each modal's onClose, which diverges from the close() cleanup path used
on navigation; change reset() to iterate the current _modalList (shallow copy it
first) and call close(id) for each modal id so the existing close(id) semantics
(onClose callbacks, timer cleanup, and listener notifications) are reused;
ensure you still clear _timers/_modalList as needed after using close(id) to
avoid double-cleanup or keeping stale references, and reference the reset(),
close(id), _modalList, _timers, and _listner symbols when making the change.
- Around line 23-30: The modal ID generation in open(...) (new_modal) uses new
Date().toString(), which can collide when open() is called rapidly; replace that
default with a collision-resistant generator (e.g., crypto.randomUUID() or a
project-wide nanoid utility or an internal monotonic counter) so each created
modal gets a unique id; update the open function's default id behavior (and any
tests/consumers if they rely on stringified Date) to use the chosen generator
and keep references to the id field (new_modal.id, close(id)) intact.

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/app/providers/modal-provider.tsx`:
- Around line 16-21: The current modal subscription uses useState + useEffect
(modalStore.subscribe -> setModals) which is not safe for concurrent rendering;
replace this pattern by implementing a getSnapshot function that reads current
modalStore state and subscribe function that delegates to modalStore.subscribe,
then call React's useSyncExternalStore(subscribe, getSnapshot) instead of
useState/useEffect so the component reads synchronized snapshots from
modalStore; update references to useSyncExternalStore, modalStore, and remove
the useEffect/setModals logic accordingly.
- Line 6: The file imports Modal using a deep relative path
("../../shared/ui/modal/modal") which breaks consistency with the other alias
imports; replace that import with the project's alias import (e.g.,
"@/shared/ui/modal/modal") in the modal-provider file where Modal is imported so
it matches the existing alias style, and ensure the import statement referencing
Modal is updated accordingly (no other changes required).
- Around line 8-12: The local ModalItem interface in modal-provider.tsx
duplicates the store type; remove the local declaration and import the canonical
ModalItem type exported by the store (the ModalItem exported from modal.store)
so both the provider and store share a single definition; update any uses in
ModalProvider (e.g., state, props, functions referencing ModalItem) to use the
imported type and ensure the store file exports ModalItem if it doesn't already.

In `@src/shared/model/store/modal.store.ts`:
- Around line 35-36: Rename the local variable new_modal to camelCase newModal
and build the modal object using property shorthand (e.g., { id, content,
autoPlay, onClose }) instead of the verbose form, then append it to
this._modalList (update any occurrences of new_modal to newModal); this keeps
consistency with _modalList and other identifiers in this file.
- Line 13: The private field _timers is typed as Map<string, NodeJS.Timeout>,
which can break in browser builds; change its type to Map<string,
ReturnType<typeof setTimeout>> (and adjust the initializer if needed) so the
timeout type is environment-agnostic; also update any code that assumes
NodeJS.Timeout (e.g., clearTimeout calls or variable annotations) to use the new
ReturnType<typeof setTimeout> type or infer the type from setTimeout results.

---

Duplicate comments:
In `@src/shared/model/store/modal.store.ts`:
- Around line 63-69: The reset() method currently clears timers and empties
_modalList directly, bypassing each modal's onClose; instead, create a shallow
copy of _modalList and iterate it, calling the existing close(id) path for each
modal (so onClose runs), then clear this._timers and finally notify(); reference
the reset(), _timers, _modalList and close(id) symbols and ensure you reuse
close(id) rather than directly mutating _modalList.
- Around line 29-45: The default modal ID generation in open(...) using new
Date().toString() can collide; update the open method signature (open in
modal.store.ts) so the default id is generated with a collision-resistant
approach (e.g., crypto.randomUUID()) instead of new Date().toString(); ensure
the rest of the logic that references id (new_modal creation, this._modalList
update, this._timers.set(id, ...), and close(id) usage) continues to work with
the new ID format and keep the existing behavior when a caller supplies an
explicit id.